SanCi

html调用html的方法
最近闲的蛋疼 ::aru:shy:: ,弄了个本地化的随机一言,用javascript调用效果不佳,需要刷新页面才...
扫描右侧二维码阅读全文
28
2018/09

html调用html的方法

最近闲的蛋疼 ,弄了个本地化的随机一言,用javascript调用效果不佳,需要刷新页面才能显示随机一言,或者就是直接只显示随机一言而不显示页面的其它内容 ,无奈自己这方面的技术不精,折腾了好久 ,搞不清楚是什么原因,只能简单粗暴地认为是与这个响应式主题模版的兼容性问题。差不多都想放弃了,最终才想起可以用最原始的HTML调用方法。。。 于是问题得以完美解决。。。
尝试了好几种,都列出来做个备忘:

一、iframe
参考代码:

<head>
</head>
<body>
   <div id="page1">
        <iframe align="center" width="100%" height="20" src="https://san.ci/hitokoto/"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
   </div>
   <div id="page2">
        <iframe align="center" width="100%" height="170" src="https://san.ci/hitokoto/"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
   </div>
</body>

二、object引入
参考代码:

<body>
    <object style="border:0px" type="text/x-scriptlet" data="https://san.ci/hitokoto/" width=100% height=150>
    </object>
</body>

三、div+$(“#page1”).load(“b.html”)
需要保持结构层次和服务
参考代码:

<body>
    <div id="page1"></div>
    <div id="page2"></div>
    <script>
          $("#page1").load("page/Page_1.html");
          $("#page2").load("page/Page_2.html");
    </script>
</body>

四、import引入
测试用参考代码:

<head>
    <link rel="import" href="page/Page_1.html" id="page1">
</head>
<body>
    <script>
        console.log(page1.import.body.innerHTML);
    </script>
</body>

实际应用还是iframeobject方法最好,有童鞋感觉iframe不能操作到父页面的跳转操作,是可以的,加上顶层判断就好
a标签 的顶层判断就是top属性,
js的顶层要去parent找百度一下都有很多的。

在线测试html代码的好地方,我的代码就是在这里测试的 http://www.w3school.com.cn/tiy/t.asp?f=html_intro


随机一言(显示内容与本文关)
Last modification:September 29th, 2018 at 01:59 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment